Skip to content

Couple of updates / fixes for the Image Carousel #1663

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
merged 6 commits into from
Aug 1, 2025
Merged

Couple of updates / fixes for the Image Carousel #1663

merged 6 commits into from
Aug 1, 2025

Conversation

@kgeller
Copy link
Contributor

@kgeller kgeller commented Jul 31, 2025 •
edited
Loading

When I was going through and adding the carousel to the integration-docs, I noticed a couple of things that I thought could be better, so this PR contains those updates

  1. Switches from fixed-height to max-height. Due to some images being smaller then the fixed height, we had too much whitespace, so I took a more adaptive approach and switched to the max-height.
  2. Due to the switch from fixed to max height, I renamed the default and auto setting to be instead called none to better fit the updated setting name.
  3. Switches when you click on the image from opening a new tab to opening a modal with the image expanded to be consistent with the regular Image directive.
  4. Now that the image height isn't fixed, I instead fix the controls at 40% from the top of the smallest image (there can be quite a range in sizing).
  5. Fixed indicators location to be below the images.

Note: this is technically a breaking change with the settings name update, but with it being so new I feel like it's fine.

Test directives 
::::{carousel}
:max-height: medium
:::{image} https://epr.elastic.co/package/1password/1.32.0/img/1password-signinattempts-screenshot.png
:alt: Sign-in attempts
:title: Sign-in attempts
:::
:::{image} https://epr.elastic.co/package/1password/1.32.0/img/1password-itemusages-screenshot.png
:alt: Item usages
:title: Item usages
:::
::::


::::{carousel}
:max-height: medium
:::{image} https://epr.elastic.co/package/bitwarden/1.17.0/img/bitwarden-event-dashboard.png
:alt: Event dashboard
:title: Event dashboard
:::
:::{image} https://epr.elastic.co/package/bitwarden/1.17.0/img/bitwarden-group-and-collection-dashboard.png
:alt: Group and Collection dashboard
:title: Group and Collection dashboard
:::
:::{image} https://epr.elastic.co/package/bitwarden/1.17.0/img/bitwarden-member-dashboard.png
:alt: Member dashboard
:title: Member dashboard
:::
:::{image} https://epr.elastic.co/package/bitwarden/1.17.0/img/bitwarden-policy-dashboard.png
:alt: Policy dashboard
:title: Policy dashboard
:::
::::


::::{carousel}
:max-height: medium
:::{image} https://epr.elastic.co/package/armis/0.3.0/img/armis-alerts.png
:alt: Alerts Dashboard
:title: Alerts Dashboard
:::
:::{image} https://epr.elastic.co/package/armis/0.3.0/img/armis-devices.png
:alt: Devices Dashboard
:title: Devices Dashboard
:::
:::{image} https://epr.elastic.co/package/armis/0.3.0/img/armis-vulnerabilities.png
:alt: Vulnerabilities Dashboard
:title: Vulnerabilities Dashboard
:::
::::

[After] Screen recording with a couple examples from the integration docs dashboards

Screen.Recording.2025-07-31.at.10.14.01.AM.mov

[Before] Screen recording with existing carousel functionality from generated output from integration-docs PR

Screen.Recording.2025-07-31.at.10.31.10.AM.mov

Relates https://github.com/elastic/integration-experience/issues/83

@kgeller kgeller requested review from a team as code owners July 31, 2025 14:34
@Mpdreamz Mpdreamz added the fix label Aug 1, 2025
@kgeller
Copy link
Contributor Author

kgeller commented Aug 1, 2025

@reakaleek @Mpdreamz Thank you for approving and adding the label!

Would one of you mind merging as well 🙏 ? I don't have permissions (especially with the failing CI build check)

@reakaleek reakaleek merged commit 58fe884 into elastic:main Aug 1, 2025
17 of 18 checks passed
@kgeller kgeller deleted the carousel-updates branch August 1, 2025 14:01
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@reakaleek reakaleek reakaleek approved these changes

Assignees

No one assigned

Labels

fix

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@kgeller @reakaleek @Mpdreamz